<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<div id="box">我的盒子</div>

		<button id="clear">清除定时器</button>
		<button id="start">开启定时器</button>
		<script type="text/javascript">
			//			function hello() {
			//				alert("hello");
			//			}
			//			
			//			function helloworld(){
			//				alert("helloworld")
			//			}
			//			//使用方法名字执行方法  
			//			var t1 = window.setTimeout(hello, 1000);
			//			var t2 = window.setTimeout(helloworld,3000);//使用字符串执行方法  
			//			window.clearTimeout(t1)//去掉定时器
			//			
			odiv = document.getElementById("box");
			ostart = document.getElementById("start");
			var num = 0;
			let timer;
//				timer = setInterval(function() {
//				num++;
//				console.log(num)
//				odiv.style.marginLeft = (num * 1.2) + 'px'
//			}, 200)

			clearId = document.getElementById("clear");
			clearId.onclick = function() {
				clearTimeout(timer);
			}

			ostart.onclick = function() {
				//开启定时器，先清除原来的定时器
				clearInterval(timer);
				timer = setInterval(function() {
					num++;
					console.log(num)
					odiv.style.marginLeft = (num * 1.5) + 'px'
				}, 100)
			}
		</script>
	</body>

</html>